可能會用個日曆 來記錄這三十天

咒語:創建一個個人日歷或日程表應用，允許用戶添加、編輯和刪除事件，顯示日期和時間信息 使用DatePicker TimePicker幫我生成JSX檔案

import React, { useState } from 'react';
import { DatePicker, TimePicker } from '@mui/lab';
import { LocalizationProvider, DesktopDatePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

const PersonalCalendar = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [selectedTime, setSelectedTime] = useState(new Date());

  return (
    <div>
      <h2>Personal Calendar</h2>
      <div>
        <h3>Date Selector</h3>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DesktopDatePicker
            label="Select Date"
            inputFormat="MM/dd/yyyy"
            value={selectedDate}
            onChange={(newDate) => setSelectedDate(newDate)}
            renderInput={(params) => <TextField {...params} />}
          />
        </LocalizationProvider>
      </div>
      <div>
        <h3>Time Selector</h3>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <TimePicker
            label="Select Time"
            value={selectedTime}
            onChange={(newTime) => setSelectedTime(newTime)}
            renderInput={(params) => <TextField {...params} />}
          />
        </LocalizationProvider>
      </div>
    </div>
  );
};

export default PersonalCalendar;

這樣就可以記錄這三十天的血淚